<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>
	<body>
		<div class="main">
			<div class="g-left box"></div>
			<div class="g-both box"></div>
			<div class="g-slide box"></div>
		</div>
	</body>
	<style>
		.main {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
		}
		.box {
			position: relative;
			width: 600px;
			height: 100px;
			margin: 5vmin auto 15vmin;
			background: hsl(48, 100%, 50%);
			border-radius: 20px;
			box-shadow: 0 0 5px 2px hsl(48, 100%, 45%);
		}
        /* 
        -   要制作立体阴影，关键在于基于元素的伪元素，生成一个大小与父元素相近的元素，通过位移形变等手段将其进行 rotate 以及定位到合适位置，再赋予模糊操作；
        -   颜色运用也至关重要，通常阴影的颜色比原本的颜色更深。使用 HSL 颜色表示方式更容易操作，其中 L 通道可以控制颜色的明暗度。
        
        */
		.g-left::before {
			content: "";
			position: absolute;
			top: 50%;
			left: 5%;
			right: 5%;
			bottom: 0;
			border-radius: 10px;
			background: hsl(48, 100%, 20%);
			transform: translate(0, -15%) rotate(-4deg);
			transform-origin: center center;
			box-shadow: 0 0 20px 15px hsl(48, 100%, 20%);
			z-index: -1;
		}

		.g-both {
			background: hsl(199, 98%, 48%);
			box-shadow: 0 0 5px 2px hsl(199, 98%, 40%);
		}

		.g-both::before {
			content: "";
			position: absolute;
			top: 50%;
			left: 5%;
			right: 5%;
			bottom: 15%;
			border-radius: 10px;
			background: hsl(199, 98%, 20%);
			transform: translate(0, -20%) rotate(-4deg);
			transform-origin: center center;
			box-shadow: 0 0 20px 15px hsl(199, 98%, 20%);
			z-index: -1;
		}

		.g-both::after {
			content: "";
			position: absolute;
			top: 50%;
			left: 5%;
			right: 5%;
			bottom: 15%;
			border-radius: 10px;
			background: hsl(199, 98%, 20%);
			transform: translate(0, -20%) rotate(4deg);
			transform-origin: center center;
			box-shadow: 0 0 20px 15px hsl(199, 98%, 20%);
			z-index: -1;
		}

		.g-slide {
			background: hsl(150, 62%, 52%);
			box-shadow: 0 0 5px 2px hsl(150, 62%, 40%);
		}

		.g-slide::before {
			content: "";
			position: absolute;
			top: 15%;
			bottom: 20%;
			left: 90%;
			right: 5%;
			border-radius: 10px;
			background: hsl(150, 62%, 20%);
			transform: translate(105%, 10%) rotate(15deg);
			transform-origin: center center;
			box-shadow: 0 0 10px 7px hsl(150, 62%, 20%);
			z-index: -1;
		}

		.g-slide::after {
			content: "";
			position: absolute;
			top: 15%;
			bottom: 20%;
			left: 5%;
			right: 90%;
			border-radius: 10px;
			background: hsl(150, 62%, 20%);
			transform: translate(-105%, 10%) rotate(-15deg);
			transform-origin: center center;
			box-shadow: 0 0 10px 7px hsl(150, 62%, 20%);
			z-index: -1;
		}
	</style>
</html>
